<template>
  <view>
    <!-- 文章列表 -->
    <view v-for="(article, index) in articles" :key="index" class="article-item" @click="goToDetail(article.article_id)">
      <text class="title">{{ article.title }}</text>
      <text class="meta">{{ article.author }} | {{ formatDate(article.publish_time) }}</text>
      <view class="divider" v-if="index < articles.length - 1"></view>
    </view>

    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 空数据提示 -->
    <view v-if="!isLoading && articles.length === 0" class="empty">
      <text>暂无文章</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articles: [], // 文章列表数据
      isLoading: false, // 加载状态
      page: 1, // 当前页码
      size: 10, // 每页条数
      hasMore: true // 是否还有更多数据
    };
  },
  methods: {
    // 获取文章列表
    async fetchArticles() {
      if (!this.hasMore || this.isLoading) return; // 防止重复加载

      this.isLoading = true;
      try {
        const res = await uni.request({
          url: `http://127.0.0.1:5001/api_1_0/article`, // 替换为实际的后端 API 地址
          method: 'GET',
          data: {
            Page: this.page,
            Size: this.size
          }
        });

        if (res.statusCode === 200) {
          const newArticles = res.data.data || [];
          this.articles = this.articles.concat(newArticles); // 追加新数据
          this.hasMore = this.page * this.size < res.data.totalCount; // 判断是否还有更多数据
          this.page++; // 页码加 1
        } else {
          uni.showToast({ title: '获取文章列表失败', icon: 'none' });
        }
      } catch (err) {
        console.error('获取文章列表失败', err);
        uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
      } finally {
        this.isLoading = false;
      }
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    },
    // 跳转到文章详情页面
    goToDetail(articleId) {
      uni.navigateTo({
        url: `/pages/other/articleDetail?id=${articleId}` // 跳转到文章详情页
      });
    }
  },
  onLoad() {
    // 页面加载时获取文章列表
    this.fetchArticles();
  },
  onReachBottom() {
    // 滚动到底部时加载更多
    this.fetchArticles();
  }
};
</script>

<style>
.article-item {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.meta {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}
.divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 16px 0;
}
.loading,
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}
</style>